<template>
   <div class="wmDelicious" :style="{minHeight:$store.state.minHeight+'rem'}">
      <myHead title="美食"></myHead>
      <div class="wm-top">
         <div class="search" @click="search">
            <div><img src="../../../static/img/dingweisousuo.png" alt=""><p>{{searchMsg?searchMsg:'请输入你要搜索的美食名称'}}</p>
            </div>
            <p>搜索</p>
         </div>
         <div class="dh">
            <div @click="selectIndex=0">
               <van-dropdown-menu :class="selectIndex==0?'sel':''">
                  <van-dropdown-item v-model="value1" :options="option1" @change="onConfirm"/>
               </van-dropdown-menu>
            </div>
            <p :class="selectIndex==1?'sel      ':''" @click="selectIndex=1">离我最近</p>
            <p :class="selectIndex==2?'sel':''" @click="selectIndex=2">会员领红包</p>
            <div @click="selectIndex=3">
               <van-dropdown-menu :class="selectIndex==3?'sel':''">
                  <van-dropdown-item v-model="value2" :options="option2" @change="onConfirm"/>
               </van-dropdown-menu>
            </div>
         </div>
      </div>
      <div class="boxWrap">
         <div class="boxItem" v-for="x in shopList" @click="jump('details')">
            <img :src="x.url" alt="">
            <div class="box_right">
               <div class="boxTit">{{x.name}}</div>
               <p class="boxYs">已销售{{x.ys}}&nbsp;&nbsp;|&nbsp;&nbsp;好评{{x.hpl}}%</p>
               <div class="star">
                  <van-rate allow-half v-model="x.star" readonly/>
                  <p>{{x.star}}分</p>
               </div>
               <div class="boxMoney">
                  <p><span style="font-size: .14rem">￥</span>{{x.money}}</p>
                  <p>去购买</p>
               </div>
            </div>
         </div>
      </div>
   </div>
</template>

<script>
    import myHead from "../../components/ClientComponents/lib/myHead";
    import Vue from 'vue';
    import {DropdownMenu, DropdownItem, Rate} from 'vant';

    Vue.use(Rate);
    Vue.use(DropdownMenu);
    Vue.use(DropdownItem);
    export default {
        name: "wmDelicious",
        components: {
            myHead
        },
        data() {
            return {
                value1: '综合排序',
                value2: '筛选',
                option1: [
                    {text: '综合排序', value: '综合排序'},
                    {text: '好评排序', value: '好评排序'},
                    {text: '销量排序', value: '销量排序'},
                ],
                option2: [
                    {text: '筛选', value: '筛选'},
                    {text: '距离最近', value: '距离最近'},
                    {text: '品质联盟', value: '品质联盟'},
                ],
                shopList: [{
                    url: '../../../static/img/shop7.png',
                    name: '美味可口酸辣粉丝的简单又好吃的懒人做法',
                    money: '259',
                    star: 3.5,
                    ys: 3599,
                    hpl: 99
                }, {
                    url: '../../../static/img/shop6.png',
                    name: '美味可口酸辣粉丝的简单又好吃的懒人做法',
                    money: '259',
                    star: 3.5,
                    ys: 3599,
                    hpl: 99
                },
                    {
                        url: '../../../static/img/shop7.png',
                        name: '美味可口酸辣粉丝的简单又好吃的懒人做法',
                        money: '259',
                        star: 3.5,
                        ys: 3599,
                        hpl: 99
                    }, {
                        url: '../../../static/img/shop6.png',
                        name: '美味可口酸辣粉丝的简单又好吃的懒人做法',
                        money: '259',
                        star: 3.5,
                        ys: 3599,
                        hpl: 99
                    }],
                selectIndex: 0,
                searchMsg: this.$route.query.msg
            }
        },
        methods: {
            onConfirm(value) {
                console.log(value)
                for (var i = 0; i < this.option1.length; i++) {
                    if (this.option1[i].text == value) {
                        break;
                    }
                }
                i != this.option1.length ? this.selectIndex = 0 : this.selectIndex = 3;
                console.log(this.selectIndex)
            },
            jump(page, data = '') {
                this.$router.push({
                    name: page,
                    query: {
                        searchMsg: data
                    }
                })
            },
            search() {
                this.$router.replace({
                    name: 'search',
                    query: {
                        type: 0,
                        searchMsg:this.searchMsg
                    }
                })
            }
        }
    }
</script>

<style scoped>
   .wmDelicious {
      width: 100%;
      box-sizing: border-box;
      padding: 1.5rem .1rem 0;
      background-color: #F5F5F5;
   }

   .wm-top {
      width: 100%;
      position: fixed;
      top: .49rem;
      left: 0;
      background-color: #F5F5F5;
      z-index: 3;
   }

   .search {
      width: 100%;
      box-sizing: border-box;
      height: .5rem;
      padding: 0 .15rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }

   .search > div {
      width: 3.05rem;
      height: .35rem;
      background: rgba(255, 255, 255, 1);
      border-radius: .16rem;
      box-sizing: border-box;
      padding-left: .22rem;
      display: flex;
      flex-flow: row;
      align-items: center;
   }

   .search > p {
      font-size: .15rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FF7814;
   }

   .search > div > img {
      width: .16rem;
      height: .16rem;
      margin-right: .05rem;
   }

   .search > div > p {
      font-size: .12rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #D1D1D1;
   }

   .dh {
      width: 100%;
      box-sizing: border-box;
      height: .5rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      padding: 0 .1rem;
      z-index: 1;
   }

   .dh > p {
      font-size: .13rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
   }

   /* 下拉菜单 */
   /deep/ .van-dropdown-menu {
      width: .8rem;
      height: .5rem !important;
      background-color: transparent;
   }

   /deep/ .van-dropdown-menu__title {
      padding: 0 .08rem;
      font-size: .15rem;
      line-height: .18rem;
   }

   /deep/ .van-dropdown-menu__title::after {
      position: absolute;
      top: 50%;
      right: -.04rem;
      margin-top: -.05rem;
      border: .03rem solid;
      border-color: transparent transparent currentColor currentColor;
      opacity: .8;
      content: '';
   }

   >>> .van-dropdown-item--down {
      top: 1.49rem !important;
   }

   >>> .van-cell {
      padding: .1rem .16rem;
      overflow: hidden;
      color: #323233;
      font-size: .14rem;
      line-height: .24rem;
      background-color: #fff;
   }

   >>> .van-cell:not(:last-child)::after {
      left: .16rem;
      border-bottom: .01rem solid #ebedf0;
   }

   >>> .van-dropdown-menu__title {
      color: inherit;
   }

   .sel {
      color: #FF7814 !important;
   }

   .boxItem {
      width: 100%;
      box-sizing: border-box;
      padding: .15rem .1rem;
      background-color: #FFFFFF;
      border-radius: .08rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: .1rem;
   }

   .boxItem > img {
      width: 1.10rem;
      margin-right: .15rem;
   }

   .box_right {
      width: 100%;
      height: 1.1rem;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
   }

   .boxTit {
      font-size: .14rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: .2rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
   }

   .boxYs {
      font-size: .12rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
   }

   .star {
      display: flex;
      flex-flow: row;
      align-items: center;
   }

   .star > p {
      margin-left: .1rem;
      font-size: .12rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #FFC046;
   }

   /* 评分 */
   >>> .van-rate__icon {
      font-size: .16rem !important;
   }

   >>> .van-rate__item:not(:last-child) {
      padding-right: .04rem;
   }

   .boxMoney {
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }

   .boxMoney > p:nth-child(1) {
      font-size: .2rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: rgba(255, 0, 0, 1);
      line-height: .16rem;
   }

   .boxMoney > p:nth-child(2) {
      width: .77rem;
      height: .27rem;
      background: linear-gradient(90deg, rgba(255, 142, 65, 1) 0%, rgba(255, 110, 0, 1) 100%);
      border-radius: .13rem;
      text-align: center;
      line-height: .27rem;
      font-size: .14rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
   }
</style>
